<include file="public/layout"/>
<script src="__ROOT__/public/static/js/layer/laydate/laydate.js"></script>
<link rel="stylesheet" href="__PUBLIC__/pc/cropper/css/cropper.min.css">
<link rel="stylesheet" href="__PUBLIC__/pc/cropper/css/ImgCropping.css">

<style type="text/css">
    html, body {overflow: visible;}
</style>
<body style="background-color: #FFF; overflow: auto;">
<div id="toolTipLayer"
     style="position: absolute; z-index: 9999; display: none; visibility: visible; left: 95px; top: 573px;"></div>
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div class="page">
    <div class="fixed-bar">
        <div class="item-title">
            <div class="subject">
                <h3>参数管理 -- 基本设置</h3>
                <h5></h5>
            </div>
        </div>
    </div>
    <form class="form-horizontal" action="{:U('Home/saveParams')}" id="add_post" method="post">
        <div class="ncap-form-default">

            <div class="fixed-bar1">
                <div class="item-title">
                    <div class="subject">
                        <h3>网站头部信息</h3>
                        <h5>网站头部设置</h5>
                    </div>
                    <ul class="tab-base nc-row"></ul>
                </div>
            </div>
            <dl class="row">
                <dt class="tit">
                    <label for="site_title">网站标题</label>
                </dt>
                <dd class="opt">
                    <input id="site_title" name="site_title" value="{$info.site_title}" class="input-txt" type="text" />
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="site_short">网站欢迎语</label>
                </dt>
                <dd class="opt">
                    <textarea name="site_short" id="site_short" class="form-control" style="width: 50%;height: 60px;" maxlength="70" onchange="this.value=this.value.substring(0, 70)" onkeydown="this.value=this.value.substring(0, 70)" onkeyup="this.value=this.value.substring(0, 70)">{$info.site_short}</textarea>
                    <p class="notic">限制70个字(您还能输入 <span class="site_short_num" style="color: #f00"></span> 个字)</p>
                </dd>
            </dl>
            <script>
                $(function () {

                    var num = $('#site_short').val().length;
                    $('.site_short_num').html(70-num*1);

                    $('#site_short').keydown(function () {

                        num = $(this).val().length;
                        $('.site_short_num').html(70-num*1);

                    })
                })
            </script>
            <dl class="row hide pic-box">
                <dt class="tit">
                    <label>网站ico</label>
                </dt>
                <dd class="opt">
                    <div id="replaceImg" style="width: 64px;height: 64px;border: solid 1px #989898;padding: 5px;margin-top: 10px;cursor: pointer">
                        <img id="finalImg" src="{$info.site_ico|default='__PUBLIC__/default/no_pic.png'}" width="100%">
                    </div>
                    <input type="hidden" name="site_ico">
                    <span class="err" id="pic_err" style="display: none">栏目名称不能为空!!</span>
                    <p class="notic">请上传图片格式文件（64*64）</p>
                </dd>
            </dl>
            <dl class="row hide pic-box">
                <dt class="tit">
                    <label>网站logo</label>
                </dt>
                <dd class="opt">
                    <div class="input-file-show">
                        <span class="show">
                            <a id="img_a" target="_blank" class="nyroModal" rel="gal" href="{$info.site_logo}">
                                <i id="img_i" class="fa fa-picture-o" onMouseOver="layer.tips('<img src={$info.site_logo} width=400 >',this,{tips: [1, '#fff']});" onMouseOut="layer.closeAll();"></i>
                            </a>
                        </span>
                        <span class="type-file-box">
                            <input type="text" id="imagetext" name="site_logo" value="{$info.site_logo}" class="type-file-text">
                            <input type="button" name="button" id="button1" value="选择上传..." class="type-file-button">
                            <input class="type-file-file" onClick="GetUploadify(1,'','logo','img_call_back')" size="30" hidefocus="true" nc_type="change_site_logo" title="点击前方预览图可查看大图，点击按钮选择文件并提交表单后上传生效">
                        </span>
                    </div>
                    <span class="err"></span>
                    <p class="notic">请上传图片格式文件（960*180）</p>
                </dd>
            </dl>
            <br>
            <div class="fixed-bar1">
                <div class="item-title">
                    <div class="subject">
                        <h3>网站首页seo信息</h3>
                        <h5>网站首页seo设置</h5>
                    </div>
                    <ul class="tab-base nc-row"></ul>
                </div>
            </div>

            <dl class="row">
                <dt class="tit">
                    <label for="site_seo_title">网站首页seo标题</label>
                </dt>
                <dd class="opt">
                    <input id="site_seo_title" name="site_seo_title" value="{$info.site_seo_title}" class="input-txt" type="text" />
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="site_seo_keyword">网站首页seo关键字</label>
                </dt>
                <dd class="opt">
                    <input id="site_seo_keyword" name="site_seo_keyword" value="{$info.site_seo_keyword}" class="input-txt" type="text" />
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="site_seo_description">网站首页seo描述</label>
                </dt>
                <dd class="opt">
                    <input id="site_seo_description" name="site_seo_description" value="{$info.site_seo_description}" class="input-txt" type="text" />
                </dd>
            </dl>
            <br>
            <div class="fixed-bar1">
                <div class="item-title">
                    <div class="subject">
                        <h3>网站底部信息</h3>
                        <h5>网站底部设置</h5>
                    </div>
                    <ul class="tab-base nc-row"></ul>
                </div>
            </div>

            <dl class="row">
                <dt class="tit">
                    <label for="site_bottom_info">底部信息</label>
                </dt>
                <dd class="opt">
                    <textarea name="site_bottom_info" id="site_bottom_info" class="form-control" style="width: 50%;height: 100px;">{$info.site_bottom_info}</textarea>
                </dd>
            </dl>
            <dl class="row">
                <dt class="tit">
                    <label for="site_bottom_case">备案信息</label>
                </dt>
                <dd class="opt">
                    <textarea name="site_bottom_case" id="site_bottom_case" class="form-control" style="width: 50%;height: 100px;">{$info.site_bottom_case}</textarea>
                </dd>
            </dl>

            <!--图片裁剪框 start-->
            <div style="display: none" class="tailoring-container">
                <div class="black-cloth" onClick="closeTailor(this)"></div>
                <div class="tailoring-content">
                    <div class="tailoring-content-one">
                        <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
                            <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onChange="selectImg(this)">
                            选择图片
                        </label>
                        <div class="close-tailoring"  onclick="closeTailor(this)">×</div>
                    </div>
                    <div class="tailoring-content-two">
                        <div class="tailoring-box-parcel">
                            <img id="tailoringImg">
                        </div>
                        <div class="preview-box-parcel">
                            <p>图片预览：</p>
                            <div class="square previewImg"></div>
                        </div>
                    </div>
                    <div class="tailoring-content-three">
                        <button type="button" class="l-btn cropper-reset-btn">复位</button>
                        <button type="button" class="l-btn cropper-rotate-btn">旋转</button>
                        <button type="button" class="l-btn cropper-scaleX-btn">换向</button>
                        <button type="button" class="l-btn sureCut" id="sureCut">确定</button>
                    </div>
                </div>
            </div>
            <!--图片裁剪框 end-->

            <div class="bot">
                <input type="hidden" name="is_ajax" value="1">
                <a href="JavaScript:void(0);" class="ncap-btn-big ncap-btn-green" id="submitBtn">确认提交</a>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">

    $(function () {
        $('#publish_time').layDate();
    });

    $(document).on("click", '#submitBtn', function () {
        verifyForm();
    });

    function verifyForm() {
        $('span.err').hide();
        $.ajax({
            type: "POST",
            url: "{:U('Home/saveParams')}",
            data: $('#add_post').serialize(),
            dataType: "json",
            error: function () {
                layer.alert("服务器繁忙, 请联系管理员!");
            },
            success: function (data) {
                if (data.status === 1) {
                    layer.msg(data.msg, {icon: 1, time: 1000}, function () {
                        location.href = "{:U('Admin/Home/saveParams')}";
                    });
                } else if (data.status === 0) {
                    layer.msg(data.msg, {icon: 2, time: 1000});
                } else {
                    layer.msg(data.msg, {icon: 2, time: 1000});
                }
            }
        });
    }

    //网站logo图片上传
/*
 * 上传图片 后台专用
 * @access  public
 * @null int 一次上传图片张图
 * @elementid string 上传成功后返回路径插入指定ID元素内
 * @path  string 指定上传保存文件夹,默认存在public/upload/temp/目录
 * @callback string  回调函数(单张图片返回保存路径字符串，多张则为路径数组 )
 */
    function GetUploadify(num,elementid,path,callback,fileType)
    {
        var upurl ='/index.php?m=Admin&c=Uploadify&a=upload&num='+num+'&input='+elementid+'&path='+path+'&func='+callback+'&fileType='+fileType;
        var title = '上传图片';
        if(fileType == 'Flash'){
            title = '上传视频';
        }
        layer.open({
            type: 2,
            title: title,
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['50%', '60%'],
            content: upurl
        });
    }
    function img_call_back(fileurl_tmp)
    {
        $("#imagetext").val(fileurl_tmp);
        $("#img_a").attr('href', fileurl_tmp);
        $("#img_i").attr('onmouseover', "layer.tips('<img src="+fileurl_tmp+">',this,{tips: [1, '#fff']});");
    }
</script>
<script type="text/javascript" src="__PUBLIC__/pc/cropper/js/cropper.min.js"></script>
<script type="text/javascript" id="crop-js">

    var index = 0;
    var crop = $('#tailoringImg');
    //弹出框水平垂直居中
    (window.onresize = function () {
        var win_height = $(window).height();
        var win_width = $(window).width();
        if (win_width <= 768){
            $(".tailoring-content").css({
                "top": (win_height - $(".tailoring-content").outerHeight())/2,
                "left": 0
            });
        }else{
            $(".tailoring-content").css({
                "top": (win_height - $(".tailoring-content").outerHeight())/2,
                "left": (win_width - $(".tailoring-content").outerWidth())/2
            });
        }
    })();

    //弹出图片裁剪框
    $("#replaceImg").on("click",function () {

        $(".tailoring-container").toggle();
        index = 1;
        crop.cropper({
            aspectRatio: 64/64,//默认比例
            preview: '.previewImg',//预览视图
            guides: false,  //裁剪框的虚线(九宫格)
            autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
            cropBoxMovable: true, //是否允许移动图片
            cropBoxResizable: false,  //是否允许改变裁剪框的大小
            zoomable: false,  //是否允许缩放图片大小
            mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
            touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
            rotatable: true,  //是否允许旋转图片
            crop: function(e) {
                // 输出结果数据裁剪图像。
            }
        });
    });

    //图像上传
    function selectImg(file) {
        if (!file.files || !file.files[0]){
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            var replaceSrc = evt.target.result;
            //更换cropper的图片
            $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
        }
        reader.readAsDataURL(file.files[0]);
    }
    //cropper图片裁剪

    //旋转
    $(".cropper-rotate-btn").on("click",function () {
        $('#tailoringImg').cropper("rotate", 45);
    });
    //复位
    $(".cropper-reset-btn").on("click",function () {
        $('#tailoringImg').cropper("reset");
    });
    //换向
    var flagX = true;
    $(".cropper-scaleX-btn").on("click",function () {
        if(flagX){
            $('#tailoringImg').cropper("scaleX", -1);
            flagX = false;
        }else{
            $('#tailoringImg').cropper("scaleX", 1);
            flagX = true;
        }
        flagX != flagX;
    });

    //裁剪后的处理
    $("#sureCut").on("click",function () {
        if ($("#tailoringImg").attr("src") == null ){
            return false;
        }else{
            var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
            var base64url = cas.toDataURL('image/png'); //转换为base64地址形式

            if(index == 1){
                $("#finalImg").prop("src",base64url);//显示为图片的形式
                $("[name=site_ico]").val(base64url);//显示为图片的形式
            }else if(index == 2){
                $("#finalImg2").prop("src",base64url);//显示为图片的形式
                $("[name=site_logo]").val(base64url);//显示为图片的形式
            }

            index = 0;
            //关闭裁剪框
            closeTailor();
        }
    });
    //关闭裁剪框
    function closeTailor() {
        $(".tailoring-container").toggle();
    }
</script>
</body>
</html>